// ************************************ //
// 新版canvas的使用方法

// ****** 第一步：引入canvas *****//
// const can = require("../../utils/canvas2d")

// ****** 第二步：把方法写在onReady里 *****//

// onReady() {
//   this.canvas();
// },

// ****** 第三步：获取到canvas的上下文 调整缩放 *****//

// canvas() {
//    wx.showLoading({
//      title: '海报合成中',
//    })
//   const that = this;
//   // 使用 wx.createContext 获取绘图上下文 context
//   const query = wx.createSelectorQuery()
//   // 新接口 canvas2d
//   query.select('#myCanvas')
//     .fields({
//       node: true,
//       size: true
//     })
//     .exec((res) => {
//       const canvas = res[0].node
//       const ctx = canvas.getContext('2d')
//       const dpr = wx.getSystemInfoSync().pixelRatio
//       canvas.width = res[0].width * dpr
//       canvas.height = res[0].height * dpr
//       ctx.scale(dpr, dpr)
//       that.drawCanvas(canvas, ctx)
//     });

// },

// ****** 第四步：用异步进行绘画（异步可以解决图片层级的问题） *****//

// async drawCanvas(canvas, ctx) {
//   let that = this;

//   ...（这里是一些绘图的方法，下面具体介绍）

// ****** 第五步：将canvas保存成图片并用image标签展示出来 ******//

//   wx.canvasToTempFilePath({
//     canvas: canvas,
//     //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
//     fileType: 'jpg', 
//     success(res) {
//       // 获得图片临时路径
//       console.log(res.tempFilePath);
//       wx.hideLoading({
//         fail: (err) => {}
//       })
//       that.setData({
//         imageTempPath: res.tempFilePath
//       });
//     }
//   })
// },
// ************************************ //
// 绘制圆角矩形
/**
 *
 * @param {CanvasContext} ctx  canvas上下文
 * @param {number} x           x轴坐标
 * @param {number} y           y轴坐标
 * @param {number} width       宽度
 * @param {number} height      高度
 * @param {number} radius      圆角大小
 * @param {string} fillColor   填充颜色
 * @param {string} borderColor 线条颜色
 **/
function fillRoundRect(ctx, x, y, width, height, radius, fillColor, borderColor) {
  //圆的直径必然要小于矩形的宽高
  if (2 * radius > width || 2 * radius > height) {
    return false;
  }
  ctx.save();
  ctx.translate(x, y);
  //绘制圆角矩形的各个边
  this.drawRoundRectPath(ctx, width, height, radius, borderColor);
  ctx.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
  ctx.fill();
  ctx.restore();
}
//绘制圆角线条
/**
 *
 * @param {CanvasContext} ctx  canvas上下文
 * @param {number} width       宽度
 * @param {number} height      高度
 * @param {number} radius      圆角大小
 * @param {string} borderColor 线条颜色
 **/
function drawRoundRectPath(ctx, width, height, radius, borderColor) {
  ctx.beginPath(0);
  //从右下角顺时针绘制，弧度从0到1/2PI
  ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
  //矩形下边线
  ctx.lineTo(radius, height);
  //左下角圆弧，弧度从1/2PI到PI
  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
  //矩形左边线
  ctx.lineTo(0, radius);
  //左上角圆弧，弧度从PI到3/2PI
  ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
  //上边线
  ctx.lineTo(width - radius, 0);
  //右上角圆弧
  ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
  //右边线
  ctx.lineTo(width, height - radius);


  ctx.strokeStyle = borderColor || '#fff';
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.closePath();
}
// 绘制图片
// 使用方法如下：
// await Can.drawImg(canvas, ctx, '/static/images/img_bg.png', 0, 0, 752, 1458);
/**
 *
 * @param {CanvasContext} canvas  canvas上下文
 * @param {CanvasContext} ctx     canvas上下文
 * @param {string} url            图片路径（可以是相对路径或者是网络地址路径）
 * @param {number} x              x轴坐标
 * @param {number} y              y轴坐标
 * @param {number} w              宽度
 * @param {number} h              高度
 **/
function drawImg(canvas, ctx, url, x, y, w, h) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: url,
      success: (res) => {
        const image = canvas.createImage();
        // （如果是文件夹里的静态图片则需要在res.path前面加上  '/' +  这两个东西）
        image.src = '/' + res.path;
        // image.src = res.path;
        image.onload = () => {
          ctx.drawImage(image, x, y, w, h);
          resolve()
        }
      },
      fail: (err) => {
        console.log(err)
        // wx.hideLoading()
        wx.showToast({
          title: '下载图片失败，请稍后重试',
          icon: 'none'
        })
        reject()
        return false
      }
    })
  })
}

function drawImgOnline(canvas, ctx, url, x, y, w, h) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: url,
      success: (res) => {
        const image = canvas.createImage();
        // （如果是文件夹里的静态图片则需要在res.path前面加上  '/' +  这两个东西）
        // image.src = '/' + res.path;
        image.src = res.path;
        image.onload = () => {
          ctx.drawImage(image, x, y, w, h);
          resolve()
        }
      },
      fail: (err) => {
        console.log(err)
        // wx.hideLoading()
        wx.showToast({
          title: '下载图片失败，请稍后重试',
          icon: 'none'
        })
        reject()
        return false
      }
    })
  })
}
// 绘制头像
// 使用方法如下：
// await Can.drawAvatar(canvas, ctx, '/static/images/img_goods.png', 92.5, 1365.5, 32.5);
/**
 *
 * @param {CanvasContext} canvas  canvas上下文
 * @param {CanvasContext} ctx     canvas上下文
 * @param {string} url            图片路径（可以是相对路径或者是网络地址路径）
 * @param {number} x              头像中心的x轴坐标
 * @param {number} y              头像中心的y轴坐标
 * @param {number} r              头像的半径大小
 **/
function drawAvatar(canvas, ctx, url, x, y, r) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: url,
      success: (res) => {
        const image = canvas.createImage();
        image.src = res.path;
        image.onload = () => {
          ctx.beginPath();
          ctx.save()
          let size = 2 * r;
          ctx.arc(x, y, r, 0, 2 * Math.PI);
          ctx.clip();
          ctx.drawImage(image, x - r, y - r, size, size);
          ctx.restore();
          ctx.closePath();
          resolve();
        }
      },
      fail: (err) => {
        console.log(err)
        // wx.hideLoading()
        wx.showToast({
          title: '下载图片失败，请稍后重试',
          icon: 'none'
        })
        reject()
        return false
      }
    })
  })
}
// 绘制换行文字
/**
 * @param {CanvasContext} canvas  canvas上下文
 * @param {number} x              文字的x坐标
 * @param {number} y              文字的y坐标
 * @param {number} maxWigth       文字的宽度
 * @param {number} lineHeight     文字的行高
 * @param {number} maxRowNum      文字的最大行数
 * @param {string} font           文字的大小和字体（'24px Bold PingFang SC'）
 * @param {number} color          文字的颜色
 */
function drawText(ctx, text, x, y, maxWidth, lineHeight, maxRowNum, font, color) {
  if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
    return;
  }
  ctx.font = font || '20px Bold PingFang SC'; //绘制文字的字号和大小
  ctx.fillStyle = color || '#000'; //绘制文字的颜色
  // 字符分隔为数组
  var arrText = text.split('');
  var line = '';
  var rowNum = 1
  for (var n = 0; n < arrText.length; n++) {
    var testLine = line + arrText[n];
    var metrics = ctx.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      if (rowNum >= maxRowNum) {
        var arrLine = testLine.split('')
        arrLine.splice(-9)
        var newTestLine = arrLine.join("")
        newTestLine += "..."
        ctx.fillText(newTestLine, x, y);
        //如果需要在省略号后面添加其他的东西，就在这个位置写（列如添加扫码查看详情字样）
        //ctx.fillStyle = '#2259CA';
        //ctx.fillText('扫码查看详情',x + maxWidth-90, y);
        return
      }
      ctx.fillText(line, x, y);
      line = arrText[n];
      y += lineHeight;
      rowNum += 1
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}
// 保存图片
function saveImg(path) {
  wx.saveImageToPhotosAlbum({
    filePath: path,
    success: (res) => {
      wx.showToast({
        title: '已保存到相册',
        icon: 'success',
        duration: 2000
      })
    },
    fail: (err) => {
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      });
    }
  })
}
// 使用异步将canvas转换成临时路径的图片用来保存到手机相册
function canvasToFile(canvas) {
  return new Promise((resolve, reject) => {
    wx.canvasToTempFilePath({
      canvas: canvas,
      fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
      success(res) {
        // 获得图片临时路径
        console.log(res.tempFilePath);
        wx.hideLoading();
        resolve(res.tempFilePath);
        // that.setData({
        //   imageTempPath: res.tempFilePath
        // });
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}
module.exports = {
  fillRoundRect: fillRoundRect,
  drawRoundRectPath: drawRoundRectPath,
  drawImg: drawImg,
  drawImgOnline:drawImgOnline,
  drawAvatar: drawAvatar,
  drawText: drawText,
  saveImg: saveImg,
  canvasToFile: canvasToFile,
}